clean up request flow, update translations and deps

10 files changed, 59 insertions, 66 deletions

diff --git a/src/routes/(app)/[username]/+page.svelte b/src/routes/(app)/[username]/+page.svelte
index 35606958..932ec777 100644
--- a/src/routes/(app)/[username]/+page.svelte
+++ b/src/routes/(app)/[username]/+page.svelte
@@ -24,7 +24,7 @@
 					<button class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-40">
 						<div class="mx-auto flex">
 							<div style="mr-1">⚡️</div>
-							<div>Lightning</div>
+							<div>{$t('user.lightning')}</div>
 						</div>
 					</button>
 				</a>
@@ -35,7 +35,7 @@
 					<button class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-40">
 						<div class="mx-auto flex">
 							<img src="/images/bitcoin.svg" class="w-5 my-auto mr-1" />
-							<div>Bitcoin</div>
+							<div>{$t('user.bitcoin')}</div>
 						</div>
 					</button>
 				</a>
@@ -47,7 +47,7 @@
 						<button class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-40">
 							<div class="mx-auto flex">
 								<Icon icon="support" style="mr-1" />
-								<div>Invoice</div>
+								<div>{$t('user.invoice')}</div>
 							</div>
 						</button>
 					</a>
@@ -71,13 +71,13 @@
 
 			{#if user?.username === subject.username}
 				<p class="text-secondary mb-1">
-					This <a
+        {$t("user.this")} <a
 						href="https://lightningaddress.com"
 						class="underline"
 						target="_blank"
-						rel="noreferrer">lightning address</a
-					> is like an email for bitcoin. You can publish it on your website or business cards and use
-					it multiple times.
+      rel="noreferrer">{$t("user.lightningAddress")}</a
+    > {$t("user.likeAnEmail")}
+					
 				</p>
 			{/if}
 		</div>
diff --git a/src/routes/(app)/[username]/dashboard/+page.svelte b/src/routes/(app)/[username]/dashboard/+page.svelte
index eb4b99ae..112162ad 100644
--- a/src/routes/(app)/[username]/dashboard/+page.svelte
+++ b/src/routes/(app)/[username]/dashboard/+page.svelte
@@ -71,7 +71,7 @@
 	<div class="grid sm:grid-cols-2 gap-2 text-lg">
 		<a href="/send">
 			<button class="rounded-full border py-4 px-5 font-bold hover:opacity-80 w-full"
-				>{$t('user.dashboard.withdraw')}</button
+				>{$t('user.dashboard.send')}</button
 			>
 		</a>
 		<a href={`/${user.username}/receive`}>
@@ -110,7 +110,7 @@
 								<div class="flex">
 									<Avatar user={requester} size={20} />
 									<div class="my-auto text-left">
-										<p class="text-secondary">Awaiting</p>
+                    <p class="text-secondary">{$t("transactions.awaiting")}</p>
 										<p class="ml-1 text-lg break-words">{requester.username}</p>
 									</div>
 								</div>
@@ -131,26 +131,26 @@
 
 	<div>
 		{#each requests as { id, invoice, memo, requester: r }}
-      <a href={`/${user.username}/receive/${id}`}>
-			<div class="border-b p-2 last:border-b-0 hover:bg-gray-100">
-				<div class="flex">
-					<div>
-						<div class="flex">
-							<Avatar user={r} size={20} />
-							<div class="my-auto text-left">
-								<p class="ml-1 text-lg break-words">{r.username}</p>
-								<p class="ml-1 text-secondary">{memo}</p>
+			<a href={`/${user.username}/receive/${id}`}>
+				<div class="border-b p-2 last:border-b-0 hover:bg-gray-100">
+					<div class="flex">
+						<div>
+							<div class="flex">
+								<Avatar user={r} size={20} />
+								<div class="my-auto text-left">
+									<p class="ml-1 text-lg break-words">{r.username}</p>
+									<p class="ml-1 text-secondary">{memo}</p>
+								</div>
 							</div>
 						</div>
-					</div>
 						<div class="whitespace-nowrap my-auto ml-auto flex gap-2">
-			<button class="rounded-full border py-2 px-4 font-bold hover:opacity-80 w-full"
-				>Invoice</button
-			>
+							<button class="rounded-full border py-2 px-4 font-bold hover:opacity-80 w-full"
+								>Invoice</button
+							>
 						</div>
+					</div>
 				</div>
-			</div>
-      </a>
+			</a>
 		{/each}
 	</div>
 </div>
diff --git a/src/routes/(app)/[username]/receive/[...param]/+page.svelte b/src/routes/(app)/[username]/receive/[...param]/+page.svelte
index cb69b06a..9e9f4f66 100644
--- a/src/routes/(app)/[username]/receive/[...param]/+page.svelte
+++ b/src/routes/(app)/[username]/receive/[...param]/+page.svelte
@@ -43,7 +43,7 @@
 			class="bg-black text-white rounded-xl w-full h-[48px] flex justify-center items-center font-semibold
 				opacity-100 hover:opacity-80"
 		>
-			{amount ? 'Next' : "Sender's choice"}
+			{amount ? $t("transactions.next") : $t("transactions.sendersChoice")}
 		</button>
 	</div>
 </form>
diff --git a/src/routes/(app)/[username]/request/+page.server.js b/src/routes/(app)/[username]/request/+page.server.js
index 44c9d3a7..4515666f 100644
--- a/src/routes/(app)/[username]/request/+page.server.js
+++ b/src/routes/(app)/[username]/request/+page.server.js
@@ -2,7 +2,7 @@ import { redirect } from '@sveltejs/kit';
 import { auth, post } from '$lib/utils';
 
 export let load = ({ locals }) => {
-  console.log("YO")
+	console.log('YO');
 	if (!locals.user) throw redirect(307, '/login');
 };
 
diff --git a/src/routes/(app)/[username]/request/+page.svelte b/src/routes/(app)/[username]/request/+page.svelte
index 1e62ea00..bbbb514c 100644
--- a/src/routes/(app)/[username]/request/+page.svelte
+++ b/src/routes/(app)/[username]/request/+page.svelte
@@ -1,4 +1,5 @@
 <script>
+	import { t } from '$lib/translations';
 	import { enhance } from '$app/forms';
 	import { Icon } from '$comp';
 	import { back } from '$lib/utils';
@@ -14,7 +15,7 @@
 </button>
 
 <div class="container max-w-lg px-4 mx-auto mt-10 space-y-5">
-	<h1 class="px-3 md:px-0 text-center text-3xl md:text-4xl font-semibold">Request an invoice</h1>
+  <h1 class="px-3 md:px-0 text-center text-3xl md:text-4xl font-semibold">{$t("transactions.requestAnInvoice")}</h1>
 
 	<form action="?/create" method="POST" use:enhance class="space-y-5">
 		<input type="hidden" name="requester_id" value={user.id} />
@@ -22,7 +23,7 @@
 
 		<textarea
 			name="memo"
-			placeholder="Use this field to describe your order"
+   placeholder={$t("transactions.describeOrder")}
 			class="w-full p-4 border rounded-xl h-48"
 		/>
 
@@ -31,7 +32,7 @@
 				type="submit"
 				class="bg-black text-white border rounded-full px-6 py-2 font-bold mx-auto"
 			>
-				Submit
+        {$t("transactions.submit")}
 			</button>
 		</div>
 	</form>
diff --git a/src/routes/(app)/[username]/request/[id]/+page.server.js b/src/routes/(app)/[username]/request/[id]/+page.server.js
index 8245bef6..7beabfe6 100644
--- a/src/routes/(app)/[username]/request/[id]/+page.server.js
+++ b/src/routes/(app)/[username]/request/[id]/+page.server.js
@@ -10,10 +10,13 @@ export let load = async ({ cookies, depends, locals: { user }, params }) => {
 
 	if (invoice) {
 		let { amount, received, uuid } = invoice;
-		if ((received && !amount) || received >= amount) throw redirect(307, `/send/${uuid}`);
+		if (
+			request.recipient.username === user.username &&
+			((received && !amount) || received >= amount)
+		)
+			throw redirect(307, `/invoice/${uuid}/paid`);
 
-		if (request.requester.username === user.username)
-			throw redirect(307, `/send/${request.invoice.uuid}`);
+		if (request.requester.username === user.username) throw redirect(307, `/send/${uuid}`);
 	}
 
 	return { request };
diff --git a/src/routes/(app)/[username]/request/[id]/+page.svelte b/src/routes/(app)/[username]/request/[id]/+page.svelte
index 0f979284..7dd10e09 100644
--- a/src/routes/(app)/[username]/request/[id]/+page.svelte
+++ b/src/routes/(app)/[username]/request/[id]/+page.svelte
@@ -1,4 +1,5 @@
 <script>
+	import { t } from '$lib/translations';
 	import { Avatar } from '$comp';
 	import { f, sat, sats } from '$lib/utils';
 	import { request as req, requestRedirect } from '$lib/store';
@@ -20,7 +21,7 @@
 	<div class="text-center mb-8 space-y-5">
 		{#if request.recipient_id === user.id}
 			<p class="text-5xl break-words">
-				<span class="text-xl md:text-2xl">Sent invoice to</span>
+				<span class="text-xl md:text-2xl">{$t('transactions.sentInvoiceTo')}</span>
 			</p>
 			<div class="flex p-1 gap-2 justify-center">
 				<Avatar user={request.requester} size={20} />
@@ -34,7 +35,7 @@
 			</div>
 		{:else}
 			<p class="text-5xl break-words">
-				<span class="text-xl md:text-2xl">Sent request to</span>
+				<span class="text-xl md:text-2xl">{$t('transactions.sentRequestTo')}</span>
 			</p>
 			<div class="flex p-1 gap-2 justify-center">
 				<Avatar user={request.recipient} size={20} />
diff --git a/src/routes/(app)/[username]/settings/[...tab]/_account.svelte b/src/routes/(app)/[username]/settings/[...tab]/_account.svelte
index 24e26566..4551ccec 100644
--- a/src/routes/(app)/[username]/settings/[...tab]/_account.svelte
+++ b/src/routes/(app)/[username]/settings/[...tab]/_account.svelte
@@ -165,7 +165,7 @@
 				type="button"
 				class="border rounded-2xl font-bold w-24 text-center px-0 py-2 hover:opacity-80"
 				on:click={() => select('profile')}
-        on:keydown={() => select('profile')}>{$t("user.settings.select")}</button
+				on:keydown={() => select('profile')}>{$t('user.settings.select')}</button
 			>
 			<input
 				type="file"
@@ -220,7 +220,7 @@
 		type="button"
 		class="border rounded-2xl font-bold w-24 text-center px-0 py-2 hover:opacity-80"
 		on:click={() => select('banner')}
-      on:keydown={() => select('banner')}>{$t("user.settings.select")}</button
+		on:keydown={() => select('banner')}>{$t('user.settings.select')}</button
 	>
 	<input
 		type="file"
diff --git a/src/routes/(app)/[username]/settings/[...tab]/_security.svelte b/src/routes/(app)/[username]/settings/[...tab]/_security.svelte
index fc83e6f3..f4c04329 100644
--- a/src/routes/(app)/[username]/settings/[...tab]/_security.svelte
+++ b/src/routes/(app)/[username]/settings/[...tab]/_security.svelte
@@ -126,7 +126,9 @@
 <div>
 	<input type="hidden" name="newpin" value={pin} />
 
-	<span class="font-bold mb-1">{verifying ? $t("user.settings.verifyPIN"): $t("user.settings.securityPIN")}</span>
+	<span class="font-bold mb-1"
+		>{verifying ? $t('user.settings.verifyPIN') : $t('user.settings.securityPIN')}</span
+	>
 	<p class="text-secondary mb-1">
 		{$t('user.settings.securityPINDescription')}
 	</p>
@@ -157,7 +159,8 @@
 		</div>
 	{:else}
 		<button type="button" class="primary" on:click={togglePin}
-			><Icon icon="lock" style="mr-1" /> {user.haspin ? $t("user.settings.disablePIN") : $t("user.settings.enablePIN")}</button
+			><Icon icon="lock" style="mr-1" />
+			{user.haspin ? $t('user.settings.disablePIN') : $t('user.settings.enablePIN')}</button
 		>
 	{/if}
 </div>
diff --git a/src/routes/(app)/[username]/transactions/[...page]/+page.svelte b/src/routes/(app)/[username]/transactions/[...page]/+page.svelte
index 7f4410cc..48e710fe 100644
--- a/src/routes/(app)/[username]/transactions/[...page]/+page.svelte
+++ b/src/routes/(app)/[username]/transactions/[...page]/+page.svelte
@@ -15,10 +15,10 @@
 	let change = ({ target: { value } }) => goto(value);
 
 	let presets = [
-		{ title: 'Day', start: sub(new Date(), { days: 1 }), end: null },
-		{ title: 'Week', start: sub(new Date(), { days: 7 }), end: null },
-		{ title: 'Month', start: sub(new Date(), { months: 1 }), end: null },
-		{ title: 'All', start: sub(new Date(), { years: 5 }), end: null }
+		{ title: $t('transactions.day'), start: sub(new Date(), { days: 1 }), end: null },
+		{ title: $t('transactions.week'), start: sub(new Date(), { days: 7 }), end: null },
+		{ title: $t('transactions.month'), start: sub(new Date(), { months: 1 }), end: null },
+		{ title: $t('transactions.all'), start: sub(new Date(), { years: 5 }), end: null }
 	];
 
 	$: selection = start
@@ -66,42 +66,23 @@
 
 <div class="mt-24 mb-20">
 	<h1 class="px-3 md:px-0 text-center text-3xl md:text-4xl font-semibold mb-10">
-		{$t('user.transactions.header')}
+		{$t('transactions.header')}
 	</h1>
 
 	<div class="container w-full mx-auto text-lg px-4 max-w-xl space-y-5">
-		<div class="flex text-md text-secondary flex-wrap relative">
-			<Icon icon="clock" style="absolute left-4 top-4 opacity-50 md:hidden" />
-			<select
-				class="md:hidden bg-white border rounded-full text-center w-36 h-14"
-				on:change={change}
-			>
-				{#each presets as { start, end, title }, i}
-					<option
-						selected={selection === i}
-						value={`/${user.username}/transactions/${getUnixTime(start) + '/'}1`}>{title}</option
-					>
-				{/each}
-			</select>
-			<div class="hidden md:block flex">
+		<div class="flex text-md text-secondary relative">
+			<div class="mx-auto flex justify-center w-full gap-1">
 				{#each presets as { start, end, title }, i}
 					<a
 						class:active={selection === i}
 						href={`/${user.username}/transactions/${getUnixTime(start) + '/'}1`}
 					>
-						<button class="rounded-full border px-4 hover:opacity-80 h-14 w-20">
+						<button class="text-sm md:text-lg rounded-full border py-2 px-4 hover:opacity-80 min-w-[72px]">
 							<div class="my-auto">{title}</div>
 						</button>
 					</a>
 				{/each}
 			</div>
-			<button
-				class="ml-auto rounded-full border px-4 w-36 hover:opacity-80 flex h-14"
-				on:click={csv}
-			>
-				<Icon icon="save" style="opacity-50 mr-2 my-auto" />
-				<div class="my-auto">Export</div>
-			</button>
 		</div>
 
 		<div class="flex flex-wrap justify-center mb-8">
@@ -178,9 +159,13 @@
 					</div>
 				</div>
 			{:else}
-				<p class="text-secondary text-lg text-center">{$t('user.transactions.empty')}</p>
+				<p class="text-secondary text-lg text-center">{$t('transactions.empty')}</p>
 			{/each}
 		</div>
+		<button class="ml-auto rounded-full border py-2 px-4 w-36 hover:opacity-80 flex mx-auto" on:click={csv}>
+			<Icon icon="save" style="opacity-50 mr-2 my-auto" />
+			<div class="my-auto">{$t('transactions.export')}</div>
+		</button>
 	</div>
 </div>